<!DOCTYPE html>
<html>
    <head>
        <title>Point Cloud Viewer</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.170.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/",
                "lil": "https://unpkg.com/lil-gui@0.19.2/dist/lil-gui.esm.min.js"
            }
        }
        </script>

        <style type="text/css">
            #info {
                color: #7ad7ff;
                font-family: 'Open Sans', sans-serif;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0.3rem;
                background-color: #404040;
                z-index: 1;
            }
            @media (max-width: 600px) {
                #info,
                .dg {
                    display: none;
                }
            }
        </style>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv">
            <div id="info"></div>
        </div>

        <div>

        <script type="module">

                import lil from 'lil';
                import setupLoadingScreen from 'LoadingScreen';
                import * as THREE from 'three';
                import * as itowns from 'itowns';
                import * as debug from 'debug';
                import * as itowns_widgets from 'itowns_widgets';

                var potreeLayer;
                var oldPostUpdate;
                var viewerDiv;
                var debugGui;
                var view;
                var controls;

                /* OTHER available dataset
                const name = 'eglise_saint_blaise_arles';
                const url = 'https://raw.githubusercontent.com/gmaillet/dataset/master/';
                const file = 'eglise_saint_blaise_arles.js';
                const crs = 'EPSG:4978';
                => Geocentric

                Probleme de CORS if 'Allow CORS' plugin off
                const url = 'https://cors-anywhere.herokuapp.com/https://viz.lib.vt.edu/thessaloniki/resources/pointclouds/thessaloniki';
                const file = 'cloud.js';
                const crs = 'EPSG:3857';
                => crs unknown. Most probaly a projection centered on the center of acquisition... 
                */

                itowns.CRS.defs("EPSG:25831","+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs");
                const url = 'https://betaserver.icgc.cat/potree12/resources/pointclouds/templesagradafamilia';
                const file = 'cloud.js';
                const crs = 'EPSG:25831';

                viewerDiv = document.getElementById('viewerDiv');
                viewerDiv.style.display = 'block';

                debugGui = new lil();

                // TODO: do we really need to disable logarithmicDepthBuffer ?
                view = new itowns.View(crs, viewerDiv);
                setupLoadingScreen(viewerDiv, view);
                view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);

                // Configure Point Cloud layer
                const potreeSource = new itowns.PotreeSource({
                    file,
                    url,
                    crs,
                });

                potreeLayer = new itowns.PotreeLayer('eglise_saint_blaise_arles', {
                    source: potreeSource,
                });

                // point selection on double-click
                function dblClickHandler(event) {
                    var pick = view.pickObjectsAt(event, 5, potreeLayer);

                    for (const p of pick) {
                        console.info('Selected point #' + p.index + ' in position (' +
                            p.object.position.x + ', ' +
                            p.object.position.y + ', ' +
                            p.object.position.z +
                         ') in Points ' + p.object.layer.id);
                    }
                }
                view.domElement.addEventListener('dblclick', dblClickHandler);

                function placeCamera(position, lookAt) {
                    view.camera3D.position.copy(position);
                    view.camera3D.lookAt(lookAt);
                    view.camera3D.updateProjectionMatrix();

                    view.notifyChange(view.camera3D);
                }

                // add potreeLayer to scene
                function onLayerReady() {
                    var lookAt = potreeLayer.root.origin.toVector3();

                    var size = new THREE.Vector3();
                    potreeLayer.root.voxelOBB.box3D.getSize(size);

                    lookAt.z = potreeLayer.root.voxelOBB.box3D.min.z;

                    view.camera3D.far = 5.0 * size.length();

                    var corner = new THREE.Vector3(...potreeLayer.source.boundsConforming.slice(0, 3));
                    var position = corner.clone().add(
                        size.multiply({ x: 0, y: 0, z: (size.x / size.z) })
                    );

                    placeCamera(position, lookAt);

                    debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);

                    controls = new itowns.PlanarControls(view);
                    controls.groundLevel = potreeLayer.minElevationRange;

                    // update stats window
                    var info = document.getElementById('info');
                    view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
                        info.textContent = potreeLayer.displayedCount.toLocaleString() + ' points';
                    });
                }
                window.view = view;
                view.addLayer(potreeLayer).then(onLayerReady);
                window.view = view;
            window.itowns = itowns;
            window.THREE = THREE;

        </script>
    </body>
</html>

